<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/header::common_header(~{::title},~{::link},~{})">
    <title>注册</title>
    <link rel="stylesheet" href="/css/register.css" type="text/css">
    <link rel="stylesheet" href="/css/signin.css" type="text/css">
</head>
<body>
<div class="container1">

    <form class="form-horizontal">
        <div class="form-group">
            <label for="exampleInputUsername1"
                   class="col-sm-2 control-label inline-style font-position-right">账户名</label>
            <div class="col-sm-9 inline-style ">
                <span id="msg" style="font-size:15px;color:red"></span>
                <input type="text" class="form-control" id="exampleInputUsername1" placeholder="账户名" name="userId">
            </div>
        </div>
        <div class="form-group">

            <label for="InputPassword1" class="col-sm-2 control-label  inline-style font-position-right">密码</label>
            <div class="col-sm-9  inline-style">
                <input type="password" class="form-control" id="InputPassword1" placeholder="密码" name="password">
            </div>
        </div>
        <div class="form-group">

            <label for="InputPassword2" class="col-sm-2 control-label  inline-style font-position-right">密码</label>
            <div class="col-sm-9  inline-style">
                <input type="password" class="form-control" id="InputPassword2" placeholder="确认密码">
                <span id="s_password" class="error"></span>
            </div>
        </div>

        <div class="form-group">
            <label for="exampleInputEmail1" class="col-sm-2 control-label  inline-style font-position-right">邮箱</label>
            <div class="col-sm-9  inline-style">
                <input type="email" class="form-control" id="exampleInputEmail1" placeholder="邮箱" name="email">
            </div>
            <div class="form-group">
                <span id="MailMsg" style="font-size:15px;color:red"></span>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button id="registerBtn" class="btn btn-lg btn-primary btn-block register-btn" type="button"
                        onclick="register()">注册
                </button>
            </div>

        </div>

    </form>


</div>

</body>
</html>

<script type="text/javascript">

    function register() {

        var userId = $("#exampleInputUsername1").val();
        var password = $("#InputPassword1").val();
        var password2 = $("#InputPassword2").val();
        var email = $("#exampleInputEmail1").val();

        if (userId=="" || password=="" || password2=="" || email=="" ) {

            alert("请完善数据")

        } else {

            if (!email.match(/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/)) {
                alert("邮箱格式错误")
            } else {
                $.post(
                    "/api/register",
                    {
                        userId: userId,
                        password: password,
                        email: email
                    },
                    function (data) {
                        if (data.code == "200") {
                            alert("注册成功！点击返回进行登录")
                            window.location.href = "/toLogin"
                        } else {
                            alert(data.code + ":" + data.message);
                        }
                    })
            }

        }

    }

</script>

<script type="text/javascript">
    //实现检查登录用户名是否存在
    $(function () {
        //首先该元素不显示
        $("#msg").css("display", "none");
        //当光标移除之后，获取该元素的values值,并且判断如果不等于null传递给以下一般处理程序处理
        $("#exampleInputUsername1").blur(function () {
            var userName = $(this).val();
            if (userName != "") {
                $.post("/api/register/if_user_exit", {"userId": userName}, function (data) {
                    $("#msg").css("display", "block");
                    $("#msg").text(data.message);  //赋值
                    if (data.code == 200) {
                        $("#msg").css("color", "green")
                    }

                });
            } else {
                alert("用户名不能为空!!");
            }
        });

        //判断密码是否相等
        $("#InputPassword2").blur(function () {
            if ($("#InputPassword1").val() != $("#InputPassword2").val()) {
                alert("两次输入的密码不一致");

            }
        })

    });

</script>
